import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Login } from "actions/common";
import { pwdLogin } from "actions/login";
import { isOverflow } from "app/utils";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex , Toast} from "antd-mobile";
import phonePng from "assets/images/phone.png";
import pwdPng from "assets/images/pwd.png";
import Icon from "antd/lib/Icon";
import md5 from "app/utils/md5"

@connect(
  state => ({
    common: state.common,
    login: state.login,
  }),
  {
    Login,
    pwdLogin
  }
)
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      pwd: "",
   };
   this.handelPhone = this.handelPhone.bind(this)
   this.handelPwd = this.handelPwd.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   this.clearValue = this.clearValue.bind(this)
   
  }

handelPhone(event) {
   // console.log(event.target.value);
    this.setState({phone:event.target.value})
}
handelPwd(event) {
  //console.log(event.target.value);
  this.setState({pwd:event.target.value})
}
clearValue(e){
  if(e=='phone'){
    this.setState({phone:''})
  }else if(e=='pwd'){
    this.setState({pwd:''})
  }
}

submitLogin(){
    var { pwdLogin } = this.props;
    var password =  md5(this.state.pwd);
    //console.log(password)
    var test = /^1\d{10}$/.test(this.state.phone);
    
    if(this.state.phone == ""){
        Toast.info('请填写手机号码', 1);
        //console.log("请填写手机号码");
        return false;
    }
    if(!test) {
        Toast.info('手机号格式不正确', 1);
        //console.log("手机号格式不正确");
        return false;
    }
    if(this.state.pwd=="") {
        Toast.info('请填写密码', 1);
        //console.log("请填写密码");
        return false;
    }
    var submitData={mobile : this.state.phone, password : password, tokenType: sessionStorage.getItem("tokenType"), accessToken : sessionStorage.getItem("accessToken")};
    pwdLogin(submitData,`/user/login`).then((data)=>{
      if(data.response.success==true){
        Toast.info('登录成功',1)
        this.props.router.push('/')
      }
    })
    
   // console.log(this.props.login)
}

  componentDidMount() {
    let { Login } = this.props;

    if (this.props.common.isLogin == true) {
      isOverflow(false);
    } else {
      isOverflow(true);
    }
  }
  componentWillReceiveProps(nextProps) {
    // console.log(nextProps, "nextProps");
    // if(this.props.login.isLogin==nextProps.login.isLogin) return
    // if(nextProps.login.isLogin==true){
    //   Toast.info('登录成功', 1);
    // }else if(nextProps.login.isLogin==false){
    //   Toast.info('登录失败', 1);
    // }
  }

  render() {
    let { isLogin } = this.props.common;
    let { phone , pwd } = this.state
    return (
      <div className={`${s.loginBox}`}>
      <div>
        <AxHeader />
        <Flex className={`${s.top}`}>亲爱的用户，您正在登录安心投微信平台</Flex>
        <Flex direction="column" className={`${s.formBox}`}>
          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={phonePng} />
            <input
              placeholder="请输入您的手机号"
              type="number"
              className={`${s.phone}`}
              value={phone}
              onChange={this.handelPhone}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'phone')} />
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={pwdPng} />
            <input
              placeholder="请输入密码"
              type="password"
              className={`${s.pwd}`}
              value={pwd}
              onChange={this.handelPwd}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'pwd')} />
          </Flex.Item>
          <Flex.Item className={`${s.item} ${s.row}`} style={{paddingTop:"0.1rem",paddingBottom:"0.1rem"}}>
            <span className={`${s.redSpan}`} onClick={()=>{
              this.props.router.push('/login/forgetPwd1')
            }}>忘记密码？立即找回</span>
            <span className={`${s.redSpan}`} onClick={()=>{
              this.props.router.push('/login/smsLogin')
            }}>手机验证码登录</span>
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>登录</div>
          </Flex.Item>
        </Flex>
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
